<template>
    <!-- 添加/修改用户地址信息的表单弹框组件 -->
    <Dialog :title="dialogConfig.title" :buttons="dialogConfig.buttons" :show="dialogConfig.show"
        @close="dialogConfig.show = false" :width="'700px'">
        <el-form ref="formDataRef" :model="formData" :rules="rules" label-width="60px">
            <el-form-item label="省" prop="province" label-width="90px">
                <el-input :maxLength="10" v-model.trim="formData.province" placeholder="请输入省份" />
            </el-form-item>
            <el-form-item label="市" prop="city" label-width="90px">
                <el-input :maxLength="10" v-model.trim="formData.city" placeholder="请输入市" />
            </el-form-item>
            <el-form-item label="区/县" prop="town" label-width="90px">
                <el-input :maxLength="10" v-model.trim="formData.town" placeholder="请输入区/县" />
            </el-form-item>
            <el-form-item label="详细地址" prop="street" label-width="90px">
                <el-input :maxLength="50" v-model.trim="formData.street" placeholder="请输入详细地址" />
            </el-form-item>
            <el-form-item label="联系电话" prop="mobile" label-width="90px">
                <el-input :maxLength="20" v-model.trim="formData.mobile" placeholder="请输入联系电话" />
            </el-form-item>
            <el-form-item label="联系人" prop="contact" label-width="90px">
                <el-input :maxLength="100" v-model.trim="formData.contact" placeholder="请输入联系人" />
            </el-form-item>
        </el-form>
    </Dialog>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick, watch } from "vue"
import { useRoute, useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();

const dialogConfig = reactive({
    show: false,
    title: "编辑地址信息",
    buttons: [
        {
            type: "primary",
            text: "确定",
            click: (e) => {
                submitData();
            },
        },
    ],
});

const formData = ref({})
const formDataRef = ref()
const rules = {
    province: [{ required: true, message: "请输入省份", trigger: "blur" }],
    city: [{ required: true, message: "请输入市", trigger: "blur" }],
    town: [{ required: true, message: "请输入区/县", trigger: "blur" }],
    street: [{ required: true, message: "请输入详细地址", trigger: "blur" }],
    mobile: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
    contact: [{ required: true, message: "请输入联系人", trigger: "blur" }],
};

const emit = defineEmits(['reload'])
const submitData = () => {
    formDataRef.value.validate(async (valid) => {
        if (!valid) {
            return
        }
        let params = {}
        Object.assign(params, formData.value)
        // 新增或更新
        let result = await proxy.Request({
            method: formData.value.id == undefined ? 'post' : 'put',
            url: formData.value.id == undefined ? proxy.Api.addAddress : proxy.Api.updateAddress,
            params
        })
        if (!result) {
            return
        }
        proxy.Message.success('操作成功')
        dialogConfig.show = false
        emit('reload')
    })
}

const show = (data = {}) => {
    dialogConfig.show = true
    nextTick(() => {
        formDataRef.value.resetFields()
        formData.value = Object.assign({}, data)
    })
}

defineExpose({
    show,
});
</script>

<style lang="scss" scoped></style>
